<template>
  <view class="container">
    <!-- 用户信息头部 -->
    <view class="profile-header">
      <view class="avatar-section">
        <image class="avatar" src="/static/icons/avatar.png" />
        <view class="user-info">
          <text class="user-name">欢迎使用</text>
          <text class="user-phone">请登录以享受更多服务</text>
        </view>
      </view>
      <text class="login-btn" @click="handleLogin">登录/注册</text>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <!-- 订单相关 -->
      <view class="menu-group">
        <text class="group-title">我的订单</text>
        <view class="menu-items">
          <view class="menu-item" @click="navigateToOrders('pending')">
            <text class="item-icon">⏰</text>
            <text class="item-text">待处理</text>
            <text class="item-badge" v-if="orderCounts.pending > 0">{{ orderCounts.pending }}</text>
          </view>
          <view class="menu-item" @click="navigateToOrders('preparing')">
            <text class="item-icon">👨‍🍳</text>
            <text class="item-text">制作中</text>
            <text class="item-badge" v-if="orderCounts.preparing > 0">{{ orderCounts.preparing }}</text>
          </view>
          <view class="menu-item" @click="navigateToOrders('ready')">
            <text class="item-icon">✅</text>
            <text class="item-text">已就绪</text>
            <text class="item-badge" v-if="orderCounts.ready > 0">{{ orderCounts.ready }}</text>
          </view>
          <view class="menu-item" @click="navigateToOrders('all')">
            <text class="item-icon">📦</text>
            <text class="item-text">全部订单</text>
            <text class="item-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 个人设置 -->
      <view class="menu-group">
        <text class="group-title">个人设置</text>
        <view class="menu-items">
          <view class="menu-item" @click="changeLanguage">
            <text class="item-icon">🌐</text>
            <text class="item-text">语言设置</text>
            <text class="item-value">{{ currentLanguage === 'zh-CN' ? '中文' : 'English' }}</text>
          </view>
          <view class="menu-item" @click="showNotificationSettings">
            <text class="item-icon">🔔</text>
            <text class="item-text">消息通知</text>
            <switch class="item-switch" :checked="notificationEnabled" @change="toggleNotification" />
          </view>
          <view class="menu-item" @click="clearCache">
            <text class="item-icon">🧹</text>
            <text class="item-text">清除缓存</text>
            <text class="item-value">{{ cacheSize }}</text>
          </view>
        </view>
      </view>

      <!-- 帮助与支持 -->
      <view class="menu-group">
        <text class="group-title">帮助与支持</text>
        <view class="menu-items">
          <view class="menu-item" @click="contactSupport">
            <text class="item-icon">📞</text>
            <text class="item-text">联系客服</text>
          </view>
          <view class="menu-item" @click="viewFAQ">
            <text class="item-icon">❓</text>
            <text class="item-text">常见问题</text>
          </view>
          <view class="menu-item" @click="viewAbout">
            <text class="item-icon">ℹ️</text>
            <text class="item-text">关于我们</text>
            <text class="item-value">v1.0.0</text>
          </view>
        </view>
      </view>

      <!-- 系统信息 -->
      <view class="menu-group">
        <text class="group-title">系统信息</text>
        <view class="menu-items">
          <view class="menu-item">
            <text class="item-icon">📱</text>
            <text class="item-text">设备型号</text>
            <text class="item-value">{{ systemInfo.model }}</text>
          </view>
          <view class="menu-item">
            <text class="item-icon">⚡</text>
            <text class="item-text">系统版本</text>
            <text class="item-value">{{ systemInfo.version }}</text>
          </view>
          <view class="menu-item">
            <text class="item-icon">🌐</text>
            <text class="item-text">网络状态</text>
            <text class="item-value">{{ networkType }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <text class="logout-btn" @click="handleLogout">退出登录</text>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <text>版本号: 1.0.0</text>
      <text>© 2024 美味餐厅. 保留所有权利.</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentLanguage: uni.getStorageSync('language') || 'zh-CN',
      notificationEnabled: true,
      cacheSize: '0.0MB',
      systemInfo: {
        model: '未知',
        version: '未知',
        platform: '未知'
      },
      networkType: '未知',
      orderCounts: {
        pending: 0,
        preparing: 0,
        ready: 0,
        completed: 0,
        cancelled: 0
      }
    }
  },

  onLoad() {
    this.loadSystemInfo()
    this.loadNetworkType()
    this.calculateCacheSize()
    this.loadOrderCounts()
  },

  methods: {
    async loadSystemInfo() {
      try {
        const info = await uni.getSystemInfoSync()
        this.systemInfo = {
          model: info.model,
          version: info.version,
          platform: info.platform
        }
      } catch (error) {
        console.error('获取系统信息失败:', error)
      }
    },

    async loadNetworkType() {
      try {
        const res = await uni.getNetworkType()
        this.networkType = res.networkType
      } catch (error) {
        console.error('获取网络状态失败:', error)
      }
    },

    calculateCacheSize() {
      let total = 0
      const keys = uni.getStorageInfoSync().keys
      keys.forEach(key => {
        const item = uni.getStorageSync(key)
        if (item) {
          total += JSON.stringify(item).length
        }
      })
      this.cacheSize = (total / 1024 / 1024).toFixed(1) + 'MB'
    },

    async loadOrderCounts() {
      try {
        const res = await uni.request({
          url: 'http://localhost/api/orders',
          method: 'GET'
        })
        
        if (res.data.success) {
          const orders = res.data.data
          this.orderCounts = {
            pending: orders.filter(o => o.status === 'pending').length,
            preparing: orders.filter(o => o.status === 'preparing').length,
            ready: orders.filter(o => o.status === 'ready').length,
            completed: orders.filter(o => o.status === 'completed').length,
            cancelled: orders.filter(o => o.status === 'cancelled').length
          }
        }
      } catch (error) {
        console.error('加载订单统计失败:', error)
      }
    },

    handleLogin() {
      uni.showModal({
        title: '登录功能',
        content: '登录功能正在开发中，敬请期待！',
        showCancel: false
      })
    },

    handleLogout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户数据
            uni.clearStorageSync()
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            
            // 刷新页面
            this.$forceUpdate()
          }
        }
      })
    },

    navigateToOrders(status) {
      uni.navigateTo({
        url: `/pages/orders/orders?status=${status}`
      })
    },

    changeLanguage() {
      const newLanguage = this.currentLanguage === 'zh-CN' ? 'en-US' : 'zh-CN'
      this.currentLanguage = newLanguage
      uni.setStorageSync('language', newLanguage)
      
      uni.showToast({
        title: newLanguage === 'zh-CN' ? '已切换为中文' : 'Switched to English',
        icon: 'success'
      })
    },

    toggleNotification(e) {
      this.notificationEnabled = e.detail.value
      uni.setStorageSync('notification_enabled', this.notificationEnabled)
      
      uni.showToast({
        title: this.notificationEnabled ? '通知已开启' : '通知已关闭',
        icon: 'none'
      })
    },

    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除所有缓存数据吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync()
            this.calculateCacheSize()
            uni.showToast({
              title: '缓存已清除',
              icon: 'success'
            })
          }
        }
      })
    },

    contactSupport() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      })
    },

    viewFAQ() {
      uni.navigateTo({
        url: '/pages/webview/webview?url=https://example.com/faq'
      })
    },

    viewAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    },

    showNotificationSettings() {
      uni.showModal({
        title: '通知设置',
        content: '消息通知功能正在开发中',
        showCancel: false
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 0;
  background: #f8f8f8;
  min-height: 100vh;
}

.profile-header {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  padding: 60rpx 40rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-section {
  display: flex;
  align-items: center;
  flex: 1;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  margin-right: 30rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-phone {
  font-size: 28rpx;
  opacity: 0.9;
}

.login-btn {
  background: rgba(255,255,255,0.2);
  padding: 16rpx 32rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.menu-section {
  padding: 20rpx;
}

.menu-group {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.group-title {
  display: block;
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-items {
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.menu-item:last-child {
  border-bottom: none;
}

.item-icon {
  font-size: 40rpx;
  margin-right: 30rpx;
  width: 40rpx;
  text-align: center;
}

.item-text {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.item-value {
  font-size: 28rpx;
  color: #999;
  margin-right: 20rpx;
}

.item-arrow {
  font-size: 40rpx;
  color: #999;
}

.item-badge {
  background: #ff6b6b;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  min-width: 40rpx;
  text-align: center;
  margin-right: 20rpx;
}

.item-switch {
  transform: scale(0.8);
}

.logout-section {
  padding: 40rpx 20rpx;
}

.logout-btn {
  display: block;
  background: white;
  color: #ff6b6b;
  text-align: center;
  padding: 30rpx;
  border-radius: 15rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: 2rpx solid #ff6b6b;
}

.version-info {
  text-align: center;
  padding: 40rpx 20rpx;
  color: #999;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
  
  .menu-group {
    border-radius: 15rpx;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .container {
    background: #1a1a1a;
  }
  
  .menu-group {
    background: #2d2d2d;
  }
  
  .group-title {
    color: white;
    border-bottom-color: #404040;
  }
  
  .menu-item {
    border-bottom-color: #404040;
  }
  
  .item-text {
    color: white;
  }
  
  .item-value {
    color: #999;
  }
  
  .logout-btn {
    background: #2d2d2d;
    border-color: #ff6b6b;
  }
}
</style>